import { defineComponent, ref, watch } from "vue";
import { genderType } from "@/utils/dict";
import { useZhenDuanJieGuo } from "@/stores/modules/zhenDuanJieGuo";

export const JiBenXinXiEr = defineComponent({
  name: "JiBenXinXiEr",
  setup() {
    const state = ref<any>({
      ruleForm: {}
    });
    watch(
      () => useZhenDuanJieGuo().jiBingTableSomeOne,
      () => {
        if (Object.keys(useZhenDuanJieGuo().jiBingTableSomeOne).length > 0 && useZhenDuanJieGuo().jiBingID) {
          state.value.ruleForm.ZhiDao = useZhenDuanJieGuo().jiBingTableSomeOne.ZhiDao;
          state.value.ruleForm.ChengDu = useZhenDuanJieGuo().jiBingTableSomeOne.ChengDu;
          state.value.ruleForm.DuiYingBuWei = useZhenDuanJieGuo().jiBingTableSomeOne.DuiYingBuWei;
          state.value.ruleForm.ShiYongCiShu = useZhenDuanJieGuo().jiBingTableSomeOne.ShiYongCiShu;
          useZhenDuanJieGuo().setJiBingTableAddList(state.value.ruleForm);
        }
      },
      {
        deep: true,
        immediate: true
      }
    );
    watch(
      () => state.value.ruleForm,
      () => {
        useZhenDuanJieGuo().setJiBingTableAddList(state.value.ruleForm);
      },
      {
        deep: true,
        immediate: true
      }
    );
    return () => {
      return (
        <div className="JiBenXinXiEr">
          <div class="JiBenXinXiEr-form px-20">
            <div class="JiBenXinXiEr-form-item">
              <span>指导：</span>
              <el-input
                class="mt-10"
                type="textarea"
                ref="JianChaLeiBieRef"
                autosize={{ minRows: 8, maxRows: 8 }}
                v-model={state.value.ruleForm.ZhiDao}
                placeholder={"请输入指导"}
                clearable
              ></el-input>
            </div>
            <div class="JiBenXinXiEr-form-item mt-10">
              <span>程度：</span>
              <el-select
                class="w-full mt-10"
                ref="SuoShuYuanQuRef"
                multiple
                collapse-tags
                collapse-tags-tooltip
                v-model={state.value.ruleForm.ChengDu}
                placeholder="请输入程度"
                clearable
              >
                {genderType.map((item: any) => (
                  <el-option key={item.value} label={item.label} value={item.value} />
                ))}
              </el-select>
            </div>
            <div class="JiBenXinXiEr-form-item mt-10">
              <span>对应部位：</span>
              <el-input
                class="w-full mt-10"
                ref="JianChaLeiBieRef"
                v-model={state.value.ruleForm.DuiYingBuWei}
                placeholder={"请输入对应部位"}
                clearable
              ></el-input>
            </div>
            <div class="JiBenXinXiEr-form-item mt-10">
              <span>使用次数：</span>
              <el-input
                class="w-full mt-10"
                ref="JianChaLeiBieRef"
                v-model={state.value.ruleForm.ShiYongCiShu}
                placeholder={"请输入使用次数"}
                clearable
              ></el-input>
            </div>
          </div>
        </div>
      );
    };
  }
});
